<template>
  <div>
    <el-row>
      <el-col class="el-col" :span="12" :offset="6">
        <HeaderComVue  @add="add"></HeaderComVue>

        <ListComVue :todoList="todoList" 
        :del="del"
        :changeFlag="changeFlag"
        
        >

         </ListComVue>

        <FooterComVue
        
        :all="todoList.length"
        :selectNum="selectNum"
        :allSelectIsOrNo="allSelectIsOrNo"
        :allSelectTodoList="allSelectTodoList"
        :selectAllDel="selectAllDel"
        
        
        >

        </FooterComVue>

      </el-col>
    </el-row>



  </div>
</template>

<script lang="ts">
import { defineComponent, reactive,toRefs, ref, watch, computed} from 'vue';
import ListComVue from './components/ListCom.vue';
import HeaderComVue from './components/HeaderCom.vue';
import FooterComVue from './components/FooterCom.vue';

import { todo } from "./types/todo";
export default defineComponent({

  components: {
    ListComVue,
    HeaderComVue,
    FooterComVue,
 
  },
  setup() {

    const todoList = reactive<todo[]>([
      {
        id: 0,
        title: "吃饭",
        flag: false,
      },
      {
        id: 1,
        title: "睡觉",
        flag: false,
      },
      {
        id: 2,
        title: "打豆豆",
        flag: false,
      },
    ])

        // 添加数据
        const add = (title: string) => {
      // todoList.push()
      // 给数组添加数据push unshift 这俩有什么区别
      todoList.push({
        id: todoList.length,
        title,
        flag: false,
      });
    };
        // 删除元素
        const del = (index: number) => {
      todoList.splice(index, 1);
    };

       // 处理选中不选中
       const changeFlag = (todo: todo, value: boolean) => {
      todo.flag = value;
      console.log(todoList);
    };

    // 选中有多少条  看todolist当中的对象当中的flag为true的有多少条
    // 首先要知道todolist当中flag为true的一直在变化
    const selectNum = ref<number>(0);
    watch(
      todoList,
      (value) => {
        console.log(value);
        // 目的数 todolist（value）当中flag为true的有多少
        // reduce累加器的用法
        selectNum.value = value.reduce((pre, item) => {
          return item.flag == true ? pre + 1 : pre;
        }, 0);
      },
      {
        deep: true,
        immediate: true,
      }
    );

    // 判断当前的todolist当中的flag
    // 只要能判断出来就将其传递给footer即可
    // selectNum选中的有多少条，  总条数 todoList.length
    // 当selectNum == todoList.length此时true 否则为false

    const allSelectIsOrNo = computed(() => {
      return selectNum.value == todoList.length ? true : false;
    });

    // 选中之后到底是true还是false
    const allSelectTodoList = (value: boolean) => {
      // 遍历操作
      todoList.forEach((item) => {
        item.flag = value;
      });
    };

    // 操作变成了 去todoList 当中查找所有为true 将其删除
    // filter 查找符合条件 为true元素  将符合条件的返回   删除没有
    //filter查找符合条件的 为false元素  最终留下了，  将todolist清空  将得到的为false的赋值给 todolist
    const selectAllDel = () => {
      const arr = todoList.filter((item) => {
        return item.flag == false;
      });
      // 清空数组
      // todoList = []  //错误不能使  因为todoList是一种proxy数组  []就是数组
      todoList.length = 0;
      // todoList.concat(arr);
      arr.forEach((item) => {
        todoList.push(item);
      });
    };

    return {
      todoList,
      add,
      del,

      changeFlag,
      selectNum,
      allSelectIsOrNo,
      allSelectTodoList,
      selectAllDel,
    }
  }
})
</script>

<style scoped>
.el-col{
    margin-top: 50px;
    border: 1px solid #ccc;
}
</style>